<template>
  <div class="orderDetail">
    <navBar title="订单详细" />

    <!-- 顶部内容 -->
    <div class="top">
      <div class="text">{{ detail.statusDto?.msg }}</div>
      <van-cell :title="detail.realName + '  ' + detail.userPhone"
      value="" :label="detail.userAddress" />
    </div>

    <!-- 内容 -->
    <div class="content">
      <van-cell title="订单状态" :value="detail?.statusDto?.type | state" />
      <van-card
        v-for="item in detail?.cartInfo" :key="item.id"
        :num="item.cartNum"
        :price="item.truePrice"
        :desc="item.productInfo?.storeInfo"
        :title="item.productInfo?.storeName"
        :thumb="item.productInfo?.image"
      >
        <template #tags>
          <van-tag plain type="danger">{{ item.productInfo?.attrInfo?.sku }}</van-tag>
        </template>
      </van-card>

      <van-cell title="快递" value="" />
      <van-cell title="订单号" :value="detail.orderId" />
      <van-cell title="下单时间" :value="detail.createTime" />
      <van-cell title="运费" :value="detail.totalPostage ? detail.totalPostage : '免运费'" />
      <van-cell title="优惠" :value="detail.couponPrice ? detail.couponPrice : '无优惠'" />
      <van-cell title="总金额" :value="detail.totalPrice" />
      <van-cell title="支付方式" :value="detail.payType === 'yue' ? '余额' : '其它'" />

    </div>
  </div>
</template>

<script>
import { orderDetail } from '@/api/order'

export default {
  data() {
    return {
      detail: {},
    }
  },
  created() {
    const { params } = this.$route
    if(!params.key) return this.$toast.fail('错误参数~')
    this.orderDetail(params.key)
  },
  methods: {
    async orderDetail(key) {
      const { data } = await orderDetail(key)
      this.detail = data || {}
    }
  },
  filters: {
    // 订单状态
    state(val) {
      return val === '0' ? '待付款' : val === '1' ? '待发货' : val === '2' 
      ? '待收货' : val === '3' ? '待评论' : val === '4' ? '已完成' : ''
    }
  }
}
</script>
<style lang="scss" scoped>
.orderDetail {
  text-align: left;
  .top {
    display: flex;
    flex-direction: column;
    height: 150px;
    background-color: #FF325C;
    & >.text {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: #fff;
    }
    & > .van-cell {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  }
  .content {
    margin: 10px 0;
  }
}
</style>